<template>
  <div>
    <el-dialog v-loading="loading" :close-on-click-modal="false" :close-on-press-escape="false" :title="'同步商品至巧易商城'" :visible.sync="syncQekjDialogVisible" width="800px" append-to-body :before-close="close">

      <el-form>
        <el-form-item label="类型">
          <el-radio-group v-model="form.type">
            <el-radio :label="'all'">全部商品</el-radio>
            <!--            <el-radio :label="'section'">勾选商品</el-radio>-->
            <i class="el-icon-rank" />
          </el-radio-group>
        </el-form-item>

        <el-form-item label="已存在">
          <el-radio-group v-model="form.cover">
            <el-radio :label="0">忽略</el-radio>
            <el-radio :label="1">覆盖</el-radio>
          </el-radio-group>
        </el-form-item>

        <div class="dialog-footer">

          <template v-if="btnClickLoading">
            <div>
              <p>总共商品：{{ total }}</p>
              <p>剩余商品：{{ sy }}</p>
            </div>
            <div style="text-align: center;">
              <el-form-item>
                <el-progress :text-color="'#ffffff'" :format="formatFunc" :text-inside="true" :stroke-width="26" :percentage="percentagea" />
              </el-form-item>
              <p style="color: red;">任务进行中，请勿在此过程中进行其他操作</p>
            </div>

          </template>

          <div v-else style="text-align: center;">
            <el-button type="primary" :loading="btnClickLoading" @click="syncQekj">
              <span v-if="!btnClickLoading">开始同步</span>
              <span v-else>正在同步</span>
            </el-button>
          </div>

        </div>

      </el-form>

    </el-dialog>
  </div>
</template>
<script>
import { addSyncQekjTask, dealSyncQekjTask, getTenantRemoteList, goodsTenantSync } from '@/api/externalGoods'

export default {
  name: 'SyncQekj',
  components: {},

  props: {
    syncQekjDialogVisible: {
      type: Boolean
    }
  },
  data() {
    return {
      form: {
        type: 'all',
        cover: 0,
        section_goods_spus: []
      },
      loading: true,
      percentagea: 0,
      list: [],
      radio: 0,
      total: 0,
      sy: 0,
      btnClickLoading: false,
      queryParams: {
        page: 1,
        limit: 10
      }
    }
  },
  watch: {
    'open': function(newValue, oldValue) {
      if (newValue) {
        this.getList()
      }
    }
  },
  created() {

  },
  methods: {
    customColorMethod(percentage) {
      if (percentage < 30) {
        return '#909399'
      } else if (percentage < 70) {
        return '#e6a23c'
      } else {
        return '#67c23a'
      }
    },
    syncQekj() {
      const that = this

      // if (this.form.type == 'section' && !this.form.section_goods_spus.length) {
      //   this.$message.info('请在列表页面选择商品')
      // }

      this.btnClickLoading = true
      // console.log(this.form)
      // return

      addSyncQekjTask(this.form).then(res => {
        console.log(res)
        if (res.code === 10000) {
          that.total = that.sy = res.data.count
          that.dealTask(res.data.task_id)
        }
      })
    },
    async dealTask(id) {
      const that = this
      await dealSyncQekjTask({ task_id: id }).then(res => {
        if (res.code === 10000) {
          const used = parseInt(res.data.count) - parseInt(res.data.sy)
          const count = parseInt(res.data.count)
          that.total = count
          that.sy = res.data.sy
          that.percentagea = ((used / count) * 100).toFixed(2)
          if (that.percentagea < 100) {
            this.dealTask(id)
          }
        }
      })
    },
    formatFunc(percentage) {
      return '当前进度：' + percentage + '%'
    },
    close() {
      this.btnClickLoading = false
      this.percentagea = 0
      this.$emit('update:syncQekjDialogVisible', false)
    },
    getList() {
      this.loading = true
      getTenantRemoteList(this.queryParams).then(res => {
        // console.log(res)
        if (res.code === 10000) {
          this.list = res.data
          this.total = res.count
          this.loading = false
        }
      })
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row)
        })
      } else {
        this.$refs.multipleTable.clearSelection()
      }
    },
    handleDisable(row, index) {
      // console.log(row)
      if (row.is_added) {
        return false
      } else {
        return true
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    submitForm() {
      this.$confirm('此操作将只同步当前页面已勾选的选项, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.loading = true
        var ids = { goods_ids: [] }
        this.multipleSelection.forEach(item => {
          ids.goods_ids.push(item.id)
        })
        goodsTenantSync(ids).then(res => {
          // console.log(res)
          if (res.code === 10000) {
            this.$message({
              message: '同步成功',
              type: 'success'
            })
            this.close()
            this.$emit('refresh')
            this.loading = false
          } else {
            this.$message({
              message: res.msg,
              type: 'error'
            })
            this.loading = false
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消操作'
        })
      })
    }
  }
}
</script>

